<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  getPlanlist,
  cancelTask,
  modifyTaskTime
} from "@/api/file";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import type { FormRules } from "element-plus";

defineOptions({
  name: "build"
});

const searchProjectName = ref("");
const searchCreater = ref("");
const router = useRouter();
const tableData = ref([]);
const loading = ref(false);
const dialogTaskFormVisible = ref(false);
const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})

const TaskForm = reactive({
  taskName: '',
  distributedValue: [],
  scenarioNames: '',
  taskTime: new Date
});

const handleEdit = async row => {
  console.log(row)
  TaskForm.taskName = row.taskName;
  TaskForm.distributedValue = row.distributedValue;
  TaskForm.scenarioNames = row.scenarioNames;
  TaskForm.taskTime = row.taskTime;
  dialogTaskFormVisible.value = true;
};

const getList = async () => {
  console.log('getList', searchProjectName.value, searchCreater.value, pagination.value);
  try {
    loading.value = true;
    const res = await getPlanlist({
      projectName: searchProjectName.value,
      creater: searchCreater.value,
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize
    });

    loading.value = false;
    if (res.success) {
      tableData.value = res.data.list;
      pagination.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleCancle = async (row: { taskName: any }) => {
  try {
    loading.value = true;
    const res = await cancelTask({
      taskName: row.taskName
    });
    loading.value = false;
    if (res.success) {
      getList();
      ElMessage.success("已删除");
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};
const handleUpdateTime = async () => {
  try {
    loading.value = true;
    const utcDate = TaskForm.taskTime;
    const localDate = new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000);
    const res = await modifyTaskTime({
      taskName: TaskForm.taskName,
      runtime: localDate
    });
    loading.value = false;
    if (res.success) {
      getList();
      ElMessage.success("已更新");
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};
const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val
  getList();
}
const handleCurrentChange = (val: number) => {
  pagination.value.pageNum = val
  getList();
}

onMounted(async () => {
  await getList();
});

</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>定时任务列表</span>
      </div>
    </template>
    <div class="action-bar">
      <div class="flex justify-between w-full">
        <el-space>
          <el-form-item label="项目名称：" style="margin-bottom: 0;">
            <el-input v-model="searchProjectName" clearable placeholder="请输入项目名称" style=" width: 200px;" />
          </el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-space>
      </div>
    </div>
    <el-table ref="singleTableRef" v-loading="loading" :data="tableData" highlight-current-row stripe border
      style="width: 100%">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="projectName" label="项目名称" sortable />
      <el-table-column prop="runUser" label="执行人" sortable />
      <el-table-column prop="runScenarios" label="测试场景" sortable />
      <el-table-column prop="runTime" label="计划时间" sortable />
      <el-table-column prop="slaverIp" label="压测机" sortable />
      <el-table-column prop="status" label="状态" sortable />
      <!-- <el-table-column prop="taskName" label="任务名" sortable /> -->
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <div v-if="scope.row.status !== 'finish'">
            <el-popconfirm title="你确定要删除此项吗?" width="200" @confirm="handleCancle(scope.row)">
              <template #reference>
                <div>
                  <el-tooltip class="box-item" effect="dark" content="取消" placement="top">
                    <el-button type="primary" link>取消 </el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-popconfirm>
          </div>
          <!-- <el-button type="primary" link @click="handleEdit(scope.row)">更改 </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-[10px]">
      <el-pagination background layout="sizes, prev, pager, next, total" :total="pagination.total" :default-page-size="10"
        :current-page="pagination.pageNum" @update:current-page="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
    <!-- <el-dialog v-model="dialogTaskFormVisible" title="更改测试时间">
      <el-form label-width="auto">
        <el-form-item label="选择测试时间">
          <div class="block">
            <el-date-picker v-model="TaskForm.taskTime" type="datetime" placeholder="Select date and time" />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTaskFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateTime">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
